<template>
  <div class='search-bar'>
    <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
      <span>门禁名称：</span>
      <el-input style="width:20rem" v-model="input" placeholder="请输入内容"></el-input>
      <span class='move-right'>启用状态：</span>
      <el-form-item label="" prop="selectType">
        <el-select v-model="searchModel.selectType" placeholder="全部" style="width: 160px" @change="$forceUpdate()">
          <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-button class="move-right" type="primary" @click="handleDownload">查询
      </el-button>
      <el-button style="margin-left:20px" @click="handleDownload">重置
      </el-button>
    </el-form>
    <el-button style="margin-bottom:20px" type="info" @click="handleDownload">新增
    </el-button>
    <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit highlight-current-row>
      <el-table-column align='center' label='序号' width='95'>
        <template slot-scope='scope'>
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label='门禁名称' width='110' align='center'>
        <template slot-scope='scope'>
          <span>{{ scope.row.menj }}</span>
        </template>
      </el-table-column>
      <el-table-column label='编号' width='110' align='center'>
        <template slot-scope='scope'>
          <span>{{ scope.row.bianh }}</span>
        </template>
      </el-table-column>
      <el-table-column label='方向' width='110' align='center'>
        <template slot-scope='scope'>
          {{ scope.row.fangx }}
        </template>
      </el-table-column>
      <el-table-column class-name='status-col' label='状态' width='110' align='center'>
        <template slot-scope='scope'>
          <el-tag :type='scope.row.status | statusFilter'>{{ scope.row.status ? "启用" : "禁用" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at' label='创建时间' width='200'>
        <template slot-scope='scope'>
          <i class='el-icon-time' />
          <span>{{ scope.row.cjsj }}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at1' label='创建者' width='200'>
        <template slot-scope='scope'>
          <span>{{ scope.row.cjz }}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at2' label='操作' width='300'>
        <template slot-scope='scope'>
          <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>查看</el-button>
          <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
          <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:15px;">
      <el-pagination  background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]" :page-size="pageSize" layout=" prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>
    <!-- :current-page的值表示当前是第几页；
    :page-sizes的值表示可以选择一页多少条；
    :page-size的值表示当前一页显示几条；
    layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；
    :total的值表示共几页； -->



    <!-- <table-page indexLabel="序号" :show-index="false" :selection="true" :table-data="tableData"
      :table-column="tableColumn" :total="count" :current-page="currentPage" @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"  align="left" ref="tablePage">
    </table-page> -->

  </div>
</template>

<script>
// import { getList } from '@/api/table'

export default {
  data() {
    return {
      input: "",
      listLoading: false,
      searchModel: {},
      labelWidth: "80px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 20,
      pageSize: 5,

      types: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },],
      list: [{
        menj: '东1号门',
        bianh: '12345',
        fangx: '进场',
        tuoz: '收费进出场',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '东2号门',
        bianh: '12343',
        fangx: '出场',
        tuoz: '收费进出场',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '西1号门',
        bianh: '43215',
        fangx: '双向',
        tuoz: '收费进出场',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '西2号门',
        bianh: '12345',
        fangx: '出场',
        tuoz: '无',
        status: 1,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }, {
        menj: '停车场1号门',
        bianh: '13333',
        fangx: '出场',
        tuoz: '无',
        status: 0,
        cjsj: '2015-10-28 08:50:08',
        cjz: '管理员'
      }],
      // tableColumn: [
      //   { label: "门禁名称", prop: "menj", fixed: true },
      //   { label: "编号", prop: "bianh", width: 150 },
      //   { label: "方向", prop: "fangx", width: 150 },
      //   { label: "拓展权限", prop: "tuoz" },
      //   { label: "启用状态", prop: "status" },
      //   { label: "创建时间", prop: "cjsj", width: 200 },
      //   { label: "创建者", prop: "cjz", width: 180 },
      //   {
      //     label: "操作",
      //     prop: "action",
      //     type: "button",
      //     width: 200,
      //     button: [
      //       {
      //         label: "查看",
      //         type: "text",
      //         icon: "el-icon-view",
      //       }, {
      //         label: "编辑",
      //         type: "text",
      //         icon: "el-icon-view",
      //       }, {
      //         label: "删除",
      //         type: "text",
      //         icon: "el-icon-view",
      //       },
      //     ],
      //     method: [
      //       `_audit${this.$options.name}`,
      //       `_detail${this.$options.name}`,
      //     ],
      //   },
      // ]
    }
  },
  created() {
  },
  methods: {
    // getList() {
    //   this.tableData = list.map((item, i) => {
    //     item.menj = item.menj
    //     item.bianh = item.bianh
    //     item.fangx = item.fangx
    //     item.tuoz = item.tuoz
    //     item.status = item.status
    //     item.cjsj = item.cjsj
    //     item.cjz = item.cjz
    //     return item
    //   })
    //   this.count = 1;
    // },
    handleSizeChange(v) {
      // this.pageSize = v;
      // this.currentPage = 1;
      // this.getList();
    },
    handleCurrentChange(v) {
      // this.currentPage = v;
      // this.getList();
    },
    handleDownload() {

    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  float: left;
  margin-left: 8rem;
  margin-top: 3rem;
}
.block{
  margin-right: 2rem;
  float: right;
}
.move-right {
  margin-left: 5rem;
}
</style>
